<template lang="html">
  <div class="main bg2">
      <div class="main-group">
        <router-view></router-view>
      </div>
    <div class="main-menu">
      <div class="menu">
        <span @click="goto($route.meta.before.path)">{{$route.meta.before.name}}</span>
        <span @click="back">返回</span>
        <span @click="goto($route.meta.after.path)">{{$route.meta.after.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // fullHeight: document.documentElement.clientHeight
    };
  },
  methods: {
    back () {
      this.$router.push('/');
    },
    goto (path) {
      this.$router.push(path);
    }
  },
  mounted () {
    // window.addEventListener('resize', () => {
    //   this.fullHeight = document.documentElement.clientHeight;
    // });
  }
};
</script>

<style lang="css" scoped>
.main {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  text-align: center;
  .main-group {
    width: 80%;
    height: 80%;
  }
  .main-menu {
    width: 65%;
    height: 50px;
    margin-top: 0px;
    position: relative;
    .menu {
      font-family: '微软雅黑';
      color: rgba(255,255,255,0.5);
      display: flex;
      flex-direction: row;
      vertical-align: middle;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 100%;
      margin-left: 28%;
      margin-right: 28%;
      span {
        font-size: 16px;
        display: block;
        flex: 1;
        cursor: pointer;
        transition: all .4s;
      }
      span:hover {
        transition: all .6s;
        transform:scale(1.3,1.3);
      }
    }
    .menu::after {
      content: '';
      position: absolute;
      width: 60%;
      height: 20px;
      top: 100%;
      overflow: hidden;
      background-size:100% 100%;
      background-image: url('../../assets/pic_back_tips.png');
    }
  }
}
</style>
